<template>
  <div class="app-search__history">
    <div class="history__block" v-if="histories.length">
      <div class="history__block__title">
        <div class="title">历史记录</div>
        <div class="action"><van-icon name="delete-o" /></div>
      </div>
      <div class="history__block__list">
        <van-tag @click="$emit('updateSearch', item)" class="history__block__item" v-for="(item, index) in histories" :key="index">{{ item }}</van-tag>
      </div>
    </div>
    <div class="history__hot">
      <div class="history__hot__title">
        <div class="title">热门搜索</div>
        <div class="discovery">
          <van-row>
            <van-col span="12"><a href="https://m.mi.com/search/list?key=全部商品">全部商品</a></van-col>
            <van-col span="12"><a href="https://m.mi.com/search/list?key=手机">手机</a></van-col>
          </van-row>
          <van-row>
            <van-col span="12"><a href="https://m.mi.com/search/list?key=红米">红米</a></van-col>
            <van-col span="12"><a href="https://m.mi.com/search/list?key=洗衣机">洗衣机</a></van-col>
          </van-row>
          <van-row>
            <van-col span="12"><a href="https://m.mi.com/search/list?key=冰箱">冰箱</a></van-col>
            <van-col span="12"><a href="https://m.mi.com/search/list?key=电视">电视</a></van-col>
          </van-row>
          <van-row>
            <van-col span="12"><a href="https://m.mi.com/search/list?key=耳机">耳机</a></van-col>
            <van-col span="12"><a href="https://m.mi.com/search/list?key=黑鲨5">黑鲨5</a></van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Tag, Col, Row } from 'vant'
import { commonLS } from '@/utils/common'

Vue.use(Tag)
Vue.use(Col)
Vue.use(Row)
export default {
  name: 'SearchHistory',
  data () {
    const [err, histories] = commonLS.get('search-history')
    return {
      // 热门搜索是否显示
      hotShow: true,
      // 热门搜索数据
      hotList: [],
      // 历史搜索数据 (从本地存储里取)
      histories: err ? [] : histories
    }
  }
}
</script>
<style lang="scss" scoped>
.app-search__history {
  padding: 8px;
  background: #fff;
  .history__block {
    margin-bottom: 20px;
    &__title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 1.2em;
      }
    }
    &__list {
      display: flex;
      flex-wrap: wrap;
      padding: 8px 0px;
    }
    &__item {
      margin: 4px;
    }
  }
  .history__hot{
    margin-bottom: 20px;
    &__title {
      display: flex;
      flex-direction: column;
      .title {
        font-size: 1.2em;
      }
      .discovery{
        margin-top: 15px;
        margin-left: 10px;
      }
    }
  }
}
</style>
